import React, { FC, useState, CSSProperties, useEffect } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import styles from './index.module.less';
import addIcon from '@/assets/preview-pdf/add.png';
import reduceIcon from '@/assets/preview-pdf/reduce.png';
import closeIcon from '@/assets/preview-pdf/close.png';
import { GetFileUrl } from '@/services/index';

// https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.min.js
// https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.5.207/pdf.worker.js

// 本地调试，可以在public目录下，引入一个离线的 pdf.worker.min.js 文件
// pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
pdfjs.GlobalWorkerOptions.workerSrc = "./pdf.worker.min.js";

interface IPdfProps {
  style?: CSSProperties;
  src?: string;
  className?: string;
  defaultImage?: string;
  pdfUrl: any;
  closePreviewPdf: any; // 关闭预览弹窗方法
  match?: any;
}
const PreviewPdf: FC<IPdfProps> = (props) => {
  const [numPages, setNumPages] = useState(null); // 页码数
  const [scale, setScale] = useState(0.7); // 放大倍数

  const [pdfUrl, setFileInfo] = useState<string | null>();

  useEffect(() => {
    getFile();
  }, []);

  const getFile = async () => {
    const res = await GetFileUrl({ id: props.match?.params?.id, device: 'H5' });
    console.log('res.data', res.data)
    setFileInfo(res.data);
  };

  // pdf预览
  const onDocumentLoadSuccess = (numPages) => {
    setNumPages(numPages.numPages);
  };

  // 放大
  const addFn = () => {
    if (scale === 1.2) {
      return;
    }
    setScale(scale + 0.1);
  };

  // 缩小
  const reduceFn = () => {
    if (scale === 0.7) {
      return;
    }
    setScale(scale - 0.1);
  };

  // 关闭预览
  const closePreviewPdf = () => {
    props.closePreviewPdf && props.closePreviewPdf(false);
  };

  return (
    <div className={styles['wrap']}>
      <div className={styles['wrap-pdf-box']}>
        {
          (props.pdfUrl || pdfUrl) &&
          <Document
            file={props.pdfUrl || pdfUrl}
            onLoadSuccess={onDocumentLoadSuccess}
            loading="正在努力加载中..."
            error="抱歉，文件加载异常"
            noData="暂无数据"
          >
            <div className={styles['list-box']}>
              {
                new Array(numPages).fill('').map((item, index) => {
                  return <Page scale={scale} className={styles['item-box']} key={index} pageNumber={index + 1} />;
                })
              }
            </div>
          </Document>
        }

      </div>
      <div className={styles['button-box']}>
        <div className={styles['add']} onClick={() => addFn()}>
          <img src={addIcon} alt="" />
        </div>
        <div className={styles['reduce']} onClick={() => reduceFn()}>
          <img src={reduceIcon} alt="" />
        </div>
      </div>
      {
        props.closePreviewPdf &&
        (
          <div className={styles['close']} onClick={() => closePreviewPdf()}>
            <img src={closeIcon} alt="" />
          </div>
        )
      }

    </div>
  );
};

export default PreviewPdf;
